<!-- 卖出 -->
<template>
	<view class="carryOlderDetail">
		<view class="headerBox"></view>
		<view class="nav_bar" :class="{'nav_bar_bg':isSticky}" :style="{paddingTop:statusBar+'px',height:customBar+'px'}">
			<view class="left" @click="$util.backPage(1)">
				<text class="iconfont icon-xiangyou"></text>
			</view>
			<view class="navTiele">我要卖出</view>
		</view>

		<view class="statusBox">
			<view class="statusName">当前金价</view>
			<view class="statusTxt">{{goldInfo.recycle_price}}</view>
		</view>

		<view class="topBox">
			<view class="weightTxt">卖出克重（g）</view>
			<view class="weightBox flex_sb border_bm">
				<input type="number" v-model="weightNum" class="weightInput" placeholder="请输入克重" placeholder-class="plTxt" />
				<text @tap="weightNum = goldInfo.gold_stock">全部</text>
			</view>
			<view class="weightTxt flex_sb">
				<text>当前可卖料：{{goldInfo.gold_stock || ''}}g</text>
				<text class="balance">余额入账：{{countPrice}}</text>
			</view>
		</view>

		<view class="sellBtn" @tap="open">确认此金价卖出</view>

		<uni-popup ref="popup" :mask-click="false">
			<view class="popContent">
				<view class="top flex_sb border_bm">
					卖出信息
					<view @tap="close">x</view>
				</view>
				<view class="item">克重 {{weightNum}}</view>
				<view class="item">金价 {{goldInfo.recycle_price}}</view>
				<view class="item border_bm">入账 {{countPrice}}</view>
				<view class="item" style="text-align: right;margin-top: 20rpx;">余额到账 {{countPrice}}
				</view>
				<view class="btn" @tap="confirmBtn">确认卖出</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		getMytock,
		postSellStock
	} from '@/api/new_store.js'
	export default {
		data() {
			return {
				customBar: this.customBar,
				statusBar: this.statusBar,
				isSticky: false, // 控制模块是否吸顶
				weightNum: '',
				goldInfo: {}
			}
		},
		computed: {
			countPrice() {
				if(!this.weightNum || !this.goldInfo.recycle_price) return '0.00'
				return (this.weightNum * this.goldInfo.recycle_price).toFixed(2)
			}
		},
		onPageScroll(e) {
			// 判断滚动距离是否超过状态栏高度
			this.isSticky = e.scrollTop > this.customBar ? true : false
		},
		onShow() {
			this.getMytockFc()
		},
		onHide() {
			this.clearTimer()
		},
		onUnload() {
			this.clearTimer()
		},
		methods: {
			clearTimer() {
				if (this._timer) {
					clearInterval(this._timer)
					this._timer = null;
				}
			},
			getMytockFc() {
				this._timer = setInterval(()=>{
					getMytock().then(res => {
						if (res.status != 200) return
						this.goldInfo = res.data
					})
				}, 1000)
			},
			open() {
				this.$refs.popup.open('bottom')
			},
			close() {
				this.$refs.popup.close()
			},
			confirmBtn() {
				let that = this
				let obj = {
					weight: this.weightNum,
					bidprice: this.goldInfo.recycle_price,
					type: 1
				}
				if(!this.weightNum) {
					that.$util.Tips({
						title: that.$t(`请输入克重`)
					});
					return
				}
				// obj.type 暂时只有1 黄金类型
				postSellStock(obj).then(res => {
					if(res.status != 200) return
					that.close()
					// console.log(res);
					that.$util.Tips({
						title: that.$t(res.msg)
					// }, {tab: 5, url: '/pages/new_gold/goldWarehouse/inOutRecord'});
					}, {tab: 4, url: '/pages/new_gold/goldWarehouse/index'});
				})
			},
			locationFc() {
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						const latitude = res.latitude;
						const longitude = res.longitude;
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							success: function() {
								console.log('success');
							}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.carryOlderDetail {
		position: relative;
		width: 100%;
		height: 100vh;
		background: rgba(244, 238, 232, 1);
		padding-bottom: 140rpx;
		overflow: hidden;
	}

	.headerBox {
		z-index: 99;
		width: 750rpx;
		height: 477rpx;
		background: linear-gradient(134.64deg, rgba(247, 234, 198, 1) 0%, rgba(226, 192, 148, 1) 100%);
	}

	.nav_bar {
		z-index: 999;
		position: relative;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		height: 80rpx;
		padding: 0 36rpx;
		box-sizing: border-box;

		.left {
			text {
				color: black;
				font-size: 32rpx;
				transform: rotate(180deg);
				display: block;
			}
		}

		.navTiele {
			width: 100%;
			font-size: 34rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			line-height: 80rpx;
			color: rgba(48, 48, 48, 1);
			text-align: center;
		}

		.navTiele::after {
			content: ' ';
			width: 1px;
			height: 1px;
		}

	}

	.nav_bar_bg {
		background: #fff;
	}

	.statusBox {
		// margin-top: -340rpx;
		margin: -300rpx 0 34rpx 48rpx;
		text-align: left;
		font-size: 30rpx;
		color: rgba(125, 73, 16, 0.7);

		.statusTxt {
			font-size: 38rpx;
			height: 50rpx;
		}
	}

	.topBox {
		width: 700rpx;
		height: 279rpx;
		border-radius: 18rpx;
		background: rgba(255, 255, 255, 1);
		margin: 0 auto;
		padding: 0 40rpx;
		overflow: hidden;

		.weightTxt {
			font-size: 28rpx;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(61, 61, 61, 1);
			text-align: left;
			margin: 38rpx 0 18rpx;

			.balance {
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(212, 48, 48, 1);
			}
		}

		.weightBox {
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(61, 61, 61, 1);
			padding-bottom: 30rpx;
			margin-top: 12rpx;
		}

		.weightInput {
			font-size: 40rpx;
			font-weight: 700;
			letter-spacing: 0rpx;
			line-height: 57.92rpx;
			color: rgba(212, 48, 48, 1);
			text-align: left;
		}

		::v-deep.plTxt {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(61, 61, 61, .3);
		}
	}

	.sellBtn {
		width: 695rpx;
		height: 97rpx;
		font-size: 32rpx;
		font-weight: 550;
		text-align: center;
		line-height: 97rpx;
		border-radius: 12rpx;
		color: rgba(43, 45, 44, 1);
		background: linear-gradient(134.64deg, rgba(247, 234, 198, 1) 0%, rgba(226, 192, 148, 1) 100%);
		margin: 200rpx auto 0;
	}

	::v-deep.vue-ref {
		padding: 0 !important;
	}

	.popContent {
		width: 750rpx;
		height: 609rpx;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 0 40rpx;

		.top {
			height: 114rpx;
			font-size: 34rpx;
			line-height: 114rpx;
			color: rgba(56, 56, 56, 1);
			margin-bottom: 36rpx;

			view {
				font-size: 48rpx;
			}
		}

		.item {
			height: 65rpx;
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(56, 56, 56, 1);
			text-align: left;
		}

		.btn {
			width: 681rpx;
			height: 100rpx;
			font-size: 28rpx;
			font-weight: 700;
			line-height: 100rpx;
			color: rgba(64, 63, 63, 1);
			text-align: center;
			border-radius: 10rpx;
			background: linear-gradient(134.64deg, rgba(226, 192, 148, 1) 0%, rgba(247, 234, 198, 1) 100%);
			margin: 26rpx auto 0;
		}
	}

	.border_bm {
		border-bottom: 2rpx solid #F8F8FA;
	}
</style>